<template>
    <div class="pkg-sample-item" @click="onClick">
        <div class="good white-bg">
            <div class="img-box">
                <img mode="cover" :src="cover" />
            </div>
            <div class="info-box">
                <div class="title-box font-bold">
                    <div class="title text-normal font-bold">{{name}}</div>
                </div>
                <div class="price color-red text-normal">¥{{priceText}}</div>
                <div v-if="statVisible" class="feature grey-color text-tiny">
                    <div class="view">阅读量 {{readNumber}}</div>
                    <div class="share">分享次数 {{shareNumber}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    currency,
} from '@/lib/utils';

export default {
    name: 'PkgSampleItem',
    props: {
        cover: {
            type: String,
        },
        name: {
            type: String,
        },
        price: {
            type: String,
        },
        readNumber: {
            type: String,
        },
        shareNumber: {
            type: String,
        },
        /** 数据是否可见 */
        statVisible: {
            type: Boolean,
            default: true,
        },
    },
    computed: {
        priceText() {
            return this.price ? currency(this.price) : '-';
        },
    },
    methods: {
        onClick() {
            this.$emit('click');
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.pkg-sample-item {
    padding: 0 32rpx 10 *2rpx;
    .good {
        border-radius: 4px 4px;
        .img-box {
            width: 100%;
            height: 120px;
            border-radius: 4px 4px 0 0;
            // box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
            overflow: hidden;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .info-box {
            // display: flex;
            // justify-content: space-between;
            // align-items: center;
            // margin-top: 10px;
            padding: 10px;
            .feature {
                display: flex;
                opacity: .8;
                // text-align: right;
                .view {
                    margin-right: 10px;
                }
            }
        }
    }
}
</style>
